<template>
  <div class="refund-status-query">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="h3 mb-0 text-gray-800">
        <i class="bi bi-search me-2"></i>退费情况查询
      </h2>
      <div class="text-muted">
        <small>查询和导出退费记录数据</small>
      </div>
    </div>

    <!-- 统计卡片区域 -->
    <div class="row mb-4 g-3">
      <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 mb-3 mb-xl-4">
        <div class="card border-left-primary shadow h-100 py-2">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2">
                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                  查询记录数
                </div>
                <div class="h5 mb-0 font-weight-bold text-gray-800">
                  {{ formatNumber(queryStats.totalCount) }}
                </div>
              </div>
              <div class="col-auto">
                <i class="bi bi-file-text fa-2x text-gray-300"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 mb-3 mb-xl-4">
        <div class="card border-left-success shadow h-100 py-2">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2">
                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                  当前页记录
                </div>
                <div class="h5 mb-0 font-weight-bold text-gray-800">
                  {{ refundData.length }}
                </div>
              </div>
              <div class="col-auto">
                <i class="bi bi-list-ul fa-2x text-gray-300"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 mb-3 mb-xl-4">
        <div class="card border-left-warning shadow h-100 py-2">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2">
                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                  当前页码
                </div>
                <div class="h5 mb-0 font-weight-bold text-gray-800">
                  {{ queryParams.pageNumber }} / {{ totalPages }}
                </div>
              </div>
              <div class="col-auto">
                <i class="bi bi-file-earmark-text fa-2x text-gray-300"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 mb-3 mb-xl-4">
        <div class="card border-left-info shadow h-100 py-2">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2">
                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                  查询耗时
                </div>
                <div class="h5 mb-0 font-weight-bold text-gray-800">
                  {{ queryStats.queryTime }}ms
                </div>
              </div>
              <div class="col-auto">
                <i class="bi bi-stopwatch fa-2x text-gray-300"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 查询条件 -->
    <div class="card mb-4">
      <div class="card-header">
        <h5 class="card-title mb-0">
          <i class="bi bi-funnel"></i> 查询条件
        </h5>
      </div>
      <div class="card-body">
        <form @submit.prevent="handleQuery" class="row g-3">
<!--           <div class="col-md-3">
            <label for="patientId" class="form-label">身份证号</label>
            <input 
              type="text" 
              class="form-control" 
              id="patientId" 
              v-model="queryParams.patientId"
              placeholder="输入身份证号"
            >
          </div> -->
          <!-- <div class="col-md-3">
            <label for="patName" class="form-label">患者姓名</label>
            <input 
              type="text" 
              class="form-control" 
              id="patName" 
              v-model="queryParams.patName"
              placeholder="输入患者姓名"
            >
          </div> -->
<!--           <div class="col-md-3">
            <label for="refundResult" class="form-label">退款结果</label>
            <select class="form-select" id="refundResult" v-model="queryParams.refundResult">
              <option value="">全部</option>
              <option value="已完成退款">已完成退款</option>
              <option value="部分退款">部分退款</option>
              <option value="患者余额增加">患者余额增加</option>
              <option value="未退款">未退款</option>
            </select>
          </div> -->
          <div class="col-md-3">
            <label for="pageSize" class="form-label">每页条数</label>
            <select class="form-select" id="pageSize" v-model="queryParams.pageSize">
              <option value="10">10条/页</option>
              <option value="20">20条/页</option>
              <option value="50">50条/页</option>
              <option value="100">100条/页</option>
            </select>
          </div>
          <!-- <div class="col-md-3">
            <label for="startDate" class="form-label">开始日期</label>
            <input 
              type="date" 
              class="form-control" 
              id="startDate" 
              v-model="queryParams.startDate"
            >
          </div> -->
          <!-- <div class="col-md-3">
            <label for="endDate" class="form-label">结束日期</label>
            <input 
              type="date" 
              class="form-control" 
              id="endDate" 
              v-model="queryParams.endDate"
            >
          </div> -->
          <div class="col-md-3">
            <label for="pageNumber" class="form-label">页码</label>
            <input 
              type="number" 
              class="form-control" 
              id="pageNumber" 
              v-model.number="queryParams.pageNumber"
              min="1"
              :max="totalPages || 1"
            >
          </div>
          <div class="col-md-3 d-flex align-items-end">
            <div class="w-100">
              <button type="submit" class="btn btn-primary me-2 w-100" :disabled="loading">
                <span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
                <i v-else class="bi bi-search me-2"></i>
                查询数据
              </button>
            </div>
          </div>
          <div class="col-12">
            <button type="button" class="btn btn-outline-secondary me-2" @click="resetQuery">
              <i class="bi bi-arrow-clockwise me-2"></i>
              重置条件
            </button>
            <button type="button" class="btn btn-success me-2" @click="exportAllData('excel')" :disabled="loading">
              <i class="bi bi-file-earmark-excel me-2"></i>
              导出Excel
            </button>
<!--             <button type="button" class="btn btn-outline-info me-2" @click="exportAllData('csv')" :disabled="loading">
              <i class="bi bi-file-earmark-text me-2"></i>
              导出CSV
            </button> -->
          </div>
        </form>
      </div>
    </div>

    <!-- 查询结果表格 -->
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">
          <i class="bi bi-table"></i> 查询结果
        </h5>
        <div class="text-muted">
          <small>共 {{ formatNumber(queryStats.totalCount) }} 条记录</small>
        </div>
      </div>
      <div class="card-body">
        <div v-if="loading" class="text-center py-5">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">查询中...</span>
          </div>
          <p class="mt-2 text-muted">正在查询退费数据...</p>
        </div>

        <div v-else-if="refundData.length === 0 && !firstLoad" class="text-center py-5">
          <i class="bi bi-inbox display-1 text-muted"></i>
          <p class="mt-3 text-muted">暂无查询结果</p>
          <p class="text-muted">请调整查询条件后重试</p>
        </div>

        <div v-else-if="refundData.length > 0" class="table-responsive">
          <table class="table table-hover table-striped">
            <thead class="table-dark">
              <tr>
                <th style="width: 80px;">序号</th>
                <th style="width: 120px;">身份证号</th>
                <th style="width: 100px;">患者姓名</th>
                <th style="width: 100px;">期初余额</th>
                <th style="width: 100px;">当前余额</th>
                <th style="width: 120px;">退款结果</th>
                <th style="width: 120px;">审核人</th>
                <th style="width: 120px;">短信联系结果</th>
                <th style="width: 120px;">预存时间</th>
                <th style="width: 80px;">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in refundData" :key="item.id || index">
                <td>{{ (queryParams.pageNumber - 1) * queryParams.pageSize + index + 1 }}</td>
                <td>
                  <span class="text-primary fw-bold font-monospace">{{ item.idNumber || '-' }}</span>
                </td>
                <td>
                  <span class="fw-bold">{{ item.name || '-' }}</span>
                </td>
                <td class="text-end">
                  <span class="fw-bold text-info">¥{{ formatAmount(item.balance) }}</span>
                </td>
                <td class="text-end">
                  <span class="fw-bold text-success">¥{{ formatAmount(item.currentBalance) }}</span>
                </td>
                <td>
                  <span class="badge bg-primary">{{ item.refundResult || '-' }}</span>
                </td>
                <td>{{ item.auditUserName || '-' }}</td>
                <td>
                  <span class="badge bg-secondary">{{ item.msgResult || '-' }}</span>
                </td>
                <td>
                  <small class="text-muted">{{ formatDateTime(item.createTime) }}</small>
                </td>
                <td>
                  <button class="btn btn-sm btn-outline-primary" @click="viewDetail(item)" title="查看详情">
                    <i class="bi bi-eye"></i>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>

          <!-- 分页控件 -->
          <div class="d-flex justify-content-between align-items-center mt-3">
            <div class="text-muted">
              <span>显示第 {{ (queryParams.pageNumber - 1) * queryParams.pageSize + 1 }} - {{ Math.min(queryParams.pageNumber * queryParams.pageSize, queryStats.totalCount) }} 条，共 {{ formatNumber(queryStats.totalCount) }} 条记录</span>
            </div>
            <nav aria-label="Page navigation">
              <ul class="pagination mb-0">
                <li class="page-item" :class="{ disabled: queryParams.pageNumber <= 1 }">
                  <a class="page-link" href="#" @click.prevent="changePage(1)" title="首页">
                    <i class="bi bi-chevron-double-left"></i>
                  </a>
                </li>
                <li class="page-item" :class="{ disabled: queryParams.pageNumber <= 1 }">
                  <a class="page-link" href="#" @click.prevent="changePage(queryParams.pageNumber - 1)" title="上一页">
                    <i class="bi bi-chevron-left"></i>
                  </a>
                </li>
                <li v-for="page in displayedPages" :key="page" 
                    class="page-item" :class="{ active: queryParams.pageNumber === page }">
                  <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
                </li>
                <li class="page-item" :class="{ disabled: queryParams.pageNumber >= totalPages }">
                  <a class="page-link" href="#" @click.prevent="changePage(queryParams.pageNumber + 1)" title="下一页">
                    <i class="bi bi-chevron-right"></i>
                  </a>
                </li>
                <li class="page-item" :class="{ disabled: queryParams.pageNumber >= totalPages }">
                  <a class="page-link" href="#" @click.prevent="changePage(totalPages)" title="末页">
                    <i class="bi bi-chevron-double-right"></i>
                  </a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>

    <!-- 详情查看模态框 -->
    <div class="modal fade" id="detailModal" tabindex="-1" ref="detailModal">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">
              <i class="bi bi-info-circle"></i> 退费记录详情
            </h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body" v-if="selectedItem">
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label fw-bold">记录ID</label>
                <div class="form-control-plaintext">{{ selectedItem.id || '-' }}</div>
              </div>
              <div class="col-md-6">
                <label class="form-label fw-bold">患者姓名</label>
                <div class="form-control-plaintext">{{ selectedItem.name || '-' }}</div>
              </div>
              <div class="col-md-6">
                <label class="form-label fw-bold">身份证号</label>
                <div class="form-control-plaintext font-monospace">{{ selectedItem.idNumber || '-' }}</div>
              </div>
              <div class="col-md-6">
                <label class="form-label fw-bold">预存时间</label>
                <div class="form-control-plaintext">{{ formatDateTime(selectedItem.createTime) }}</div>
              </div>
              <div class="col-md-6">
                <label class="form-label fw-bold">期初余额</label>
                <div class="form-control-plaintext text-info fw-bold">¥{{ formatAmount(selectedItem.balance) }}</div>
              </div>
              <div class="col-md-6">
                <label class="form-label fw-bold">当前余额</label>
                <div class="form-control-plaintext text-success fw-bold">¥{{ formatAmount(selectedItem.currentBalance) }}</div>
              </div>
              <div class="col-md-6">
                <label class="form-label fw-bold">退款结果</label>
                <div class="form-control-plaintext">
                  <span class="badge bg-primary">{{ selectedItem.refundResult || '-' }}</span>
                </div>
              </div>
              <div class="col-md-6">
                <label class="form-label fw-bold">线上退款审核人</label>
                <div class="form-control-plaintext">{{ selectedItem.auditUserName || '-' }}</div>
              </div>
              <div class="col-md-12">
                <label class="form-label fw-bold">短信联系结果</label>
                <div class="form-control-plaintext">
                  <span class="badge bg-secondary">{{ selectedItem.msgResult || '-' }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { Modal } from 'bootstrap'

export default {
  name: 'RefundStatusQuery',
  setup() {
    // 响应式数据
    const loading = ref(false)
    const firstLoad = ref(true)
    const refundData = ref([])
    const selectedItem = ref(null)
    const detailModal = ref(null)
    let modalInstance = null

    // 查询参数
    const queryParams = reactive({
      patientId: '',
      patName: '',
      refundResult: '',
      startDate: '',
      endDate: '',
      pageNumber: 1,
      pageSize: 20
    })

    // 查询统计信息
    const queryStats = reactive({
      totalCount: 0,
      queryTime: 0
    })

    // 计算属性
    const totalPages = computed(() => {
      return Math.ceil(queryStats.totalCount / queryParams.pageSize) || 1
    })

    const displayedPages = computed(() => {
      const current = queryParams.pageNumber
      const total = totalPages.value
      const pages = []
      
      if (total <= 7) {
        for (let i = 1; i <= total; i++) {
          pages.push(i)
        }
      } else {
        if (current <= 4) {
          for (let i = 1; i <= 5; i++) {
            pages.push(i)
          }
          pages.push('...')
          pages.push(total)
        } else if (current >= total - 3) {
          pages.push(1)
          pages.push('...')
          for (let i = total - 4; i <= total; i++) {
            pages.push(i)
          }
        } else {
          pages.push(1)
          pages.push('...')
          for (let i = current - 1; i <= current + 1; i++) {
            pages.push(i)
          }
          pages.push('...')
          pages.push(total)
        }
      }
      
      return pages.filter(page => page !== '...' || pages.indexOf(page) === pages.lastIndexOf(page))
    })

    // 方法
    const getAuthToken = () => {
      return localStorage.getItem('token') || sessionStorage.getItem('token')
    }

    const handleQuery = async () => {
      loading.value = true
      const startTime = Date.now()
      
      try {
        const token = getAuthToken()
        if (!token) {
          throw new Error('未找到认证令牌，请重新登录')
        }

        // 构建符合 API 期望的请求参数
        const apiParams = {
          pageIndex: queryParams.pageNumber,
          pageSize: queryParams.pageSize,
          name: queryParams.patName || undefined,
          idNumber: queryParams.patientId || undefined,
          refundResult: queryParams.refundResult || undefined,
          createTimeStart: queryParams.startDate ? new Date(queryParams.startDate).toISOString() : undefined,
          createTimeEnd: queryParams.endDate ? new Date(queryParams.endDate).toISOString() : undefined
        }

        // 移除 undefined 值
        Object.keys(apiParams).forEach(key => {
          if (apiParams[key] === undefined) {
            delete apiParams[key]
          }
        })

        console.log('发送查询请求:', apiParams)

        const response = await fetch('/api/RefundStatus/query', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify(apiParams)
        })

        if (!response.ok) {
          const errorText = await response.text()
          console.error('API 响应错误:', response.status, errorText)
          throw new Error(`查询失败: ${response.status} ${response.statusText}`)
        }

        const result = await response.json()
        console.log('API 响应数据:', result)
        
        // API 直接返回 RefundStatusQueryResponse 对象
        refundData.value = result.items || []
        queryStats.totalCount = result.totalCount || 0
        queryStats.queryTime = Date.now() - startTime
        firstLoad.value = false
        
      } catch (error) {
        console.error('查询退费数据失败:', error)
        alert(`查询失败: ${error.message}`)
        refundData.value = []
        queryStats.totalCount = 0
      } finally {
        loading.value = false
      }
    }

    const resetQuery = () => {
      Object.assign(queryParams, {
        patientId: '',
        patName: '',
        refundResult: '',
        startDate: '',
        endDate: '',
        pageNumber: 1,
        pageSize: 20
      })
      refundData.value = []
      queryStats.totalCount = 0
      queryStats.queryTime = 0
      firstLoad.value = true
    }

    const changePage = (page) => {
      if (page >= 1 && page <= totalPages.value && page !== queryParams.pageNumber) {
        queryParams.pageNumber = page
        handleQuery()
      }
    }

    const viewDetail = (item) => {
      selectedItem.value = item
      if (modalInstance) {
        modalInstance.show()
      }
    }

    const exportData = async (format) => {
      if (refundData.value.length === 0) {
        alert('当前页没有数据可以导出，请使用"导出所有数据"功能')
        return
      }

      try {
        let csvContent = ''
        let filename = ''

        if (format === 'excel' || format === 'csv') {
          // CSV格式导出
          const headers = [
            '序号', '记录ID', '身份证号', '患者姓名', '期初余额', '当前余额',
            '退款结果', '审核人', '短信联系结果', '预存时间'
          ]
          
          csvContent = headers.join(',') + '\n'
          
          refundData.value.forEach((item, index) => {
            const row = [
              (queryParams.pageNumber - 1) * queryParams.pageSize + index + 1,
              item.id || '',
              `"${item.idNumber || ''}"`,
              `"${item.name || ''}"`,
              item.balance || 0,
              item.currentBalance || 0,
              `"${item.refundResult || ''}"`,
              `"${item.auditUserName || ''}"`,
              `"${item.msgResult || ''}"`,
              `"${formatDateTime(item.createTime)}"`
            ]
            csvContent += row.join(',') + '\n'
          })

          filename = `退费数据_第${queryParams.pageNumber}页_${new Date().toISOString().slice(0, 10)}.csv`
        }

        // 创建下载链接
        const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' })
        const link = document.createElement('a')
        const url = URL.createObjectURL(blob)
        
        link.setAttribute('href', url)
        link.setAttribute('download', filename)
        link.style.visibility = 'hidden'
        
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        
        URL.revokeObjectURL(url)
        
        alert(`数据已导出为 ${filename}`)
      } catch (error) {
        console.error('导出失败:', error)
        alert(`导出失败: ${error.message}`)
      }
    }

    // 导出所有数据
    const exportAllData = async (format) => {
      try {
        // 构建导出请求参数
        const exportRequest = {
          name: queryParams.patName || null,
          idNumber: queryParams.patientId || null,
          refundResult: queryParams.refundResult || null,
          createTimeStart: queryParams.startDate ? new Date(queryParams.startDate).toISOString() : null,
          createTimeEnd: queryParams.endDate ? new Date(queryParams.endDate).toISOString() : null,
          exportFormat: format
        }

        // 先获取导出预估信息
        console.log('获取导出预估信息...')
        const estimateResponse = await fetch('/api/RefundStatus/export-estimate', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${getAuthToken()}`
          },
          body: JSON.stringify(exportRequest)
        })

        if (!estimateResponse.ok) {
          const errorData = await estimateResponse.json()
          throw new Error(errorData.message || '获取导出预估信息失败')
        }

        const estimateResult = await estimateResponse.json()
        console.log('导出预估信息:', estimateResult)

        // 显示预估信息并确认
        const confirmMessage = `${estimateResult.message}\n\n确定要继续导出吗？`
        if (!confirm(confirmMessage)) {
          return
        }

        // 显示导出进度
        const progressMessage = `正在导出 ${estimateResult.totalCount.toLocaleString()} 条记录，请稍候...`
        console.log(progressMessage)
        
        // 可以在这里添加一个加载提示
        loading.value = true

        // 执行实际导出
        console.log('开始导出所有数据...')
        const exportResponse = await fetch('/api/RefundStatus/export', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${getAuthToken()}`
          },
          body: JSON.stringify(exportRequest)
        })

        if (!exportResponse.ok) {
          const errorData = await exportResponse.json()
          throw new Error(errorData.message || '导出失败')
        }

        // 获取文件数据
        const blob = await exportResponse.blob()
        
        // 从响应头获取文件名，如果没有则使用默认文件名
        const contentDisposition = exportResponse.headers.get('content-disposition')
        let filename = `退费情况查询_所有数据_${new Date().toISOString().slice(0, 10)}`
        
        if (contentDisposition) {
          const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)
          if (filenameMatch && filenameMatch[1]) {
            filename = filenameMatch[1].replace(/['"]/g, '')
          }
        } else {
          // 根据格式添加扩展名
          filename += format === 'excel' ? '.xlsx' : '.csv'
        }

        // 创建下载链接
        const url = URL.createObjectURL(blob)
        const link = document.createElement('a')
        
        link.setAttribute('href', url)
        link.setAttribute('download', filename)
        link.style.visibility = 'hidden'
        
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        
        URL.revokeObjectURL(url)
        
        console.log('导出完成:', filename)
        alert(`所有数据已成功导出为 ${filename}`)
        
      } catch (error) {
        console.error('导出所有数据失败:', error)
        alert(`导出失败: ${error.message}`)
      } finally {
        loading.value = false
      }
    }

    // 格式化方法
    const formatAmount = (amount) => {
      if (amount == null || amount === '') return '0.00'
      return parseFloat(amount).toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
    }

    const formatNumber = (num) => {
      if (num == null || num === '') return '0'
      return parseInt(num).toLocaleString('zh-CN')
    }

    const formatDateTime = (dateTime) => {
      if (!dateTime) return '-'
      try {
        const date = new Date(dateTime)
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        })
      } catch {
        return dateTime
      }
    }

    const formatBankCard = (cardNo) => {
      if (!cardNo) return '-'
      if (cardNo.length <= 8) return cardNo
      return cardNo.slice(0, 4) + '****' + cardNo.slice(-4)
    }

    // 生命周期
    onMounted(() => {
      nextTick(() => {
        if (detailModal.value) {
          modalInstance = new Modal(detailModal.value)
        }
      })
    })

    return {
      // 数据
      loading,
      firstLoad,
      refundData,
      selectedItem,
      detailModal,
      queryParams,
      queryStats,
      
      // 计算属性
      totalPages,
      displayedPages,
      
      // 方法
      handleQuery,
      resetQuery,
      changePage,
      viewDetail,
      exportData,
      exportAllData,
      formatAmount,
      formatNumber,
      formatDateTime,
      formatBankCard
    }
  }
}
</script>

<style scoped>
.refund-status-query {
  padding: 20px;
}

.border-left-primary {
  border-left: 0.25rem solid #4e73df !important;
}

.border-left-success {
  border-left: 0.25rem solid #1cc88a !important;
}

.border-left-warning {
  border-left: 0.25rem solid #f6c23e !important;
}

.border-left-info {
  border-left: 0.25rem solid #36b9cc !important;
}

.text-xs {
  font-size: 0.7rem;
}

.text-gray-800 {
  color: #5a5c69 !important;
}

.text-gray-300 {
  color: #dddfeb !important;
}

.card {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
  border: 1px solid #e3e6f0 !important;
}

.table th {
  border-top: none;
  font-weight: 600;
  font-size: 0.85rem;
  color: #858796;
  background-color: #f8f9fc;
}

.table-responsive {
  border-radius: 0.35rem;
}

.pagination .page-link {
  color: #3a3b45;
  border-color: #dddfeb;
}

.pagination .page-item.active .page-link {
  background-color: #4e73df;
  border-color: #4e73df;
}

.pagination .page-link:hover {
  color: #2e59d9;
  background-color: #eaecf4;
  border-color: #dddfeb;
}

.modal-header {
  background-color: #4e73df;
  color: white;
}

.modal-header .btn-close {
  filter: invert(1);
}

.form-control:focus {
  border-color: #4e73df;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.btn-primary {
  background-color: #4e73df;
  border-color: #4e73df;
}

.btn-primary:hover {
  background-color: #2e59d9;
  border-color: #2653d4;
}

.font-monospace {
  font-family: 'Courier New', monospace;
}



@media (max-width: 768px) {
  .refund-status-query {
    padding: 10px;
  }
  
  .table-responsive {
    font-size: 0.85rem;
  }
  
  .pagination {
    justify-content: center;
  }
}
</style>